<template>
  <div class="particulars">
    <div class="btn-top">
      <div class="retu-btn" @click="goback">
        <img src="../../assets/images/ly/return.png" alt />
        <span>返回</span>
      </div>
    </div>
    <!-- 图形信息栏 -->
    <div class="imgData">
      <div class="img-left">
        <viewer>
          <img
            alt
            :src="
              !this.facilityData.devicePicture ||
              this.facilityData.devicePicture === '' ||
              this.facilityData.devicePicture === null
                ? errImg
                : this.facilityData.devicePicture
            "
            :onerror="errImg"
            title="查看高清图片"
            class="img"
          />
        </viewer>
        <div class="slot-img">
          <ul class="blick-ul">
            <li>
              <img src="../../assets/images/ly/ic- she-1.png" />
              <span>设备编号：{{ this.facilityData.deviceNumber }}</span>
            </li>
            <li>
              <img src="../../assets/images/ly/ic- she-1.png" />
              <span>设备名称：{{ this.facilityData.name }}</span>
            </li>
            <li>
              <img src="../../assets/images/ly/ic- she-1.png" />
              <span>设备类型：{{ this.facilityData.type_name }}</span>
            </li>
            <li>
              <img src="../../assets/images/ly/ic- she-1.png" />
              <span>设备型号：{{ this.facilityData.model_name }}</span>
            </li>
            <li>
              <img src="../../assets/images/ly/ic- she-1.png" />
              <span
                >设备位置：{{
                  this.facilityData.location == ""
                    ? address
                    : this.facilityData.location
                }}</span
              >
            </li>
            <li>
              <img src="../../assets/images/ly/ic- she-1.png" />
              <span
                >设备经度：{{
                  this.facilityData.longitude == ""
                    ? longitude
                    : this.facilityData.longitude
                }}</span
              >
              <el-button @click="handlerloaction" size="mini" type="success"
                >获取位置</el-button
              >
            </li>
            <li>
              <img src="../../assets/images/ly/ic- she-1.png" />
              <span
                >设备纬度：{{
                  this.facilityData.latitude == ""
                    ? latitude
                    : this.facilityData.latitude
                }}</span
              >
              <el-button @click="handlerloaction" size="mini" type="success"
                >获取位置</el-button
              >
            </li>
          </ul>
        </div>
      </div>
      <!-- <div class="tag-right">
        <div class="tag-one">
          <div class="one-left">
            <span>保修剩余天数</span>
            <b>20</b>
          </div>
          <img src="../../assets/images/ly/dun1.png" alt />
        </div>
        <div class="tag-one">
          <div class="one-left">
            <span>保养剩余天数</span>
            <b style="color:#FFB300">20</b>
          </div>
          <img src="../../assets/images/ly/qiy1.png" alt />
        </div>
        <div class="tag-one">
          <div class="one-left">
            <span>距离最近保养天数</span>
            <b style="color:#34AA44">2</b>
          </div>
          <img src="../../assets/images/ly/gre1.png" alt />
        </div>
      </div>-->
    </div>
    <!-- tab切换栏 -->
    <div class="partTab">
      <ul id="activUl" @click="activeClick">
        <li id="start" class="active-li" :data-name="0">基本资料</li>
        <li :data-name="1">实时曲线</li>
        <li :data-name="2">告警记录</li>
        <li :data-name="3" id="end">历史记录</li>
        <li :data-name="4" id="end">意见列表</li>
      </ul>
      <!-- <el-date-picker
        v-if="this.active != 0 ? true : false"
        v-model="value1"
        type="datetimerange"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="mini"
        value-format="yyyy-MM-dd"
        @change="dateChange"
      ></el-date-picker>-->
    </div>
    <div class="comput">
      <Datum v-if="active == 0" />
      <Curve v-if="active == 1" />
      <Report v-if="active == 2" />
      <Offline v-if="active == 3" />
      <OpinionList v-if="active == 4" />
    </div>
  </div>
</template>
<script>
import Datum from "../Project/ptl-datum";
import Curve from "../Project/ptl-curve";
import Report from "../Project/Report";
import Offline from "../Project/Off-line";
import OpinionList from "../Project/OpinionList";
import { readWarning, sendF0 } from "../../utils/api";

export default {
  inject: ["reload"],
  data() {
    return {
      active: 0,
      value1: "",
      // 设备详细数据
      facilityData: {},
      errImg: 'this.src="' + require("../../assets/images/chest.png") + '"',
      waringarr: [],
      address: "",
      latitude: "",
      longitude: ""
    };
  },
  components: {
    Datum,
    Curve,
    Report,
    Offline,
    OpinionList
  },
  methods: {
    // 点击返回
    goback() {
      this.$store.dispatch("delVisitedViews", this.$route).then(obj => {
        // this.$router.go(-1);
        if (window.sessionStorage.getItem("isRead") == null) {
          this.$router.push("/PlatformEquipment");
        } else {
          window.sessionStorage.removeItem("deviceId");
          window.sessionStorage.removeItem("isRead");
          this.$router.push("/Police");
        }
      });
    },
    activeClick(e) {
      // 获取详情页tab切换栏中的所有li
      let all = document.querySelectorAll("#activUl>li");
      // console.log(e.target,all);
      // 遍历所有li
      all.forEach((i, index) => {
        // console.log(i);
        // 删除每个li的active-li类名
        i.classList.remove("active-li");
      });
      // 给点击的那个li加上active
      e.target.className = "active-li";
      // 获取当前点击li的自定义属性值
      this.active = e.target.getAttribute("data-name");
    },
    dateChange(value) {
      //  先清除一下
      window.sessionStorage.removeItem("partTime");
      window.sessionStorage.setItem("partTime", JSON.stringify(value));
    },
    // 点击选择时间调用的函数
    changeTime(value) {
      // const result = value.join("");
      // result.substring(10, 0)
      //  result.substring(10)

      if (this.value1 == "" || this.value1 == null || this.value1 == []) {
        this.ruleForm.startTime = "";
        this.ruleForm.endTime = "";
        this.getNoworkOrder();
      } else {
        this.ruleForm.startTime = value[0];
        this.ruleForm.endTime = value[1];
        this.getNoworkOrder();
      }
    },
    // 点击获取位置
    handlerloaction() {
      this.postRequest(sendF0, {
        uid: this.facilityData.uuid
      }).then(res => {
        if (res.code == 200) {
          this.address = res.data.address;
          this.longitude = res.data.longitude;
          this.latitude = res.data.latitude;
          this.reload();
        }
      });
    },
    //改变状态
    handlerreadWarning() {
      this.postRequest(readWarning, {
        warningId: JSON.stringify(this.waringarr)
      }).then(res => {});
    }
  },
  created() {
    //  从session中拿到设备数据
    this.facilityData = JSON.parse(
      window.sessionStorage.getItem("facilityData")
    );
    this.waringarr.push(Number(window.sessionStorage.getItem("waringId")));

    if (window.sessionStorage.getItem("isRead") == 2) {
      this.handlerreadWarning();
    }
  }
};
</script>
<style lang="less" scoped>
.particulars {
  border: 1px solid rgba(234, 237, 243, 1);
  background-color: white;
  margin: 18px;
  height: 800px;
  .btn-top {
    padding: 15px 0px 15px 20px;
    .retu-btn {
      cursor: pointer;
      width: 100px;
      height: 30px;
      background: rgba(0, 119, 248, 1);
      border: 1px solid rgba(1, 101, 209, 1);
      opacity: 1;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      img {
        width: 15px;
        height: 15px;
      }
      span {
        color: rgba(255, 255, 255, 1);
        margin-left: 13px;
      }
    }
  }
  .imgData {
    padding: 10px;
    border: 1px solid rgba(234, 237, 243, 1);
    border-left: none;
    border-right: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .img-left {
      display: flex;
      flex-direction: row;
      justify-content: cente;
      align-items: center;
      margin-left: 10px;
      img {
        width: 100px;
        height: 100px;
      }
      .slot-img {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .blick-ul {
          width: 100%;
          margin-left: 10px;
          li {
            margin-bottom: 5px;
            img {
              width: 10px;
              height: 10px;
            }
            span {
              font-size: 13px;
              font-family: Microsoft YaHei;
              font-weight: 400;
            }
          }
        }
      }
    }
    // .tag-right {
    //   display: flex;
    //   flex-direction: row;
    //   align-items: center;
    //   justify-content: space-around;
    //   .tag-one {
    //     margin-right: 15px;
    //     width: 190px;
    //     height: 70px;
    //     background: rgba(255, 255, 255, 1);
    //     border: 1px solid rgba(234, 237, 243, 1);
    //     opacity: 1;
    //     border-radius: 4px;
    //     display: flex;
    //     flex-direction: row;
    //     align-items: center;
    //     justify-content: space-around;
    //     .one-left {
    //       span {
    //         display: block;
    //         color: rgba(158, 160, 165, 1);
    //         font-size: 12px;
    //         margin-bottom: 12px;
    //       }
    //       b {
    //         color: red;
    //       }
    //     }
    //     img {
    //       width: 30px;
    //       height: 30px;
    //     }
    //   }
    // }
  }
  .partTab {
    padding: 20px;
    width: 500px;
    // display: flex;
    // flex-direction: row;
    // align-items: center;
    // justify-content: space-between;
    #activUl {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      li {
        cursor: pointer;
        display: block;
        width: 83px;
        height: 30px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(234, 237, 243, 1);
        border-right: none;
        opacity: 1;
        text-align: center;
        line-height: 30px;
        color: rgba(158, 160, 165, 1);
        font-size: 12px;
      }
      #start {
        border-radius: 4px 0px 0px 4px;
      }
      #end {
        border-radius: 0px 4px 4px 0px;
        border-right: 1px solid rgba(234, 237, 243, 1);
      }
      .active-li {
        background-color: #0077f8;
        color: white;
        border: 1px solid #0077f8;
      }
    }
    .el-date-editor /deep/ {
      width: 300px;
    }
  }
  .comput {
    width: 100%;
    // height: 200px;
  }
}
</style>
